<template>
  <el-dialog
    :visible.sync="abalse"
    center
    :append-to-body="true"
    :lock-scroll="false"
    class="right_dialog"
    :before-close="handleClose"
  >
    <div class="help_dialog">
      <div v-if="isbox1">
        <div>
          <p class="title">只需4步找到最值的房子</p>
          <p class="text">—— 精准匹配房源 ——</p>
        </div>
        <div class="box">
          <p>
            <span class="num">
              01/
              <span class="num1">04</span>
            </span>
            <span class="problem">您的购房预算是多少</span>
          </p>
          <p class="company">
            <span>{{ this.value[0] }} ~ {{ this.value[1] }}</span
            >(单位：万)
          </p>
          <div class="block">
            <el-slider
              v-model="value"
              range
              :max="1000"
              :show-tooltip="true"
            ></el-slider>
          </div>
          <p
            class="next_btn"
            @click="
              isbox1 = false;
              isbox2 = true;
            "
          >
            下一步
          </p>
        </div>
      </div>
      <div v-if="isbox2">
        <div>
          <p class="title">只需4步找到最值的房子</p>
          <p class="text">—— 精准匹配房源 ——</p>
        </div>
        <div class="box">
          <p>
            <span class="num">
              02/
              <span class="num1">04</span>
            </span>
            <span class="problem">您的心仪区域是哪里（可多选）</span>
          </p>
          <div class="region">
            <p
              v-for="(item, index) in region"
              :key="index"
              @click="Onregion(item)"
              :class="[item.show ? 'region_text' : 'region_p']"
            >
              {{ item.name }}
            </p>
          </div>
          <p
            class="next_btn"
            @click="
              isbox2 = false;
              isbox3 = true;
            "
          >
            下一步
          </p>
        </div>
      </div>
      <div v-if="isbox3">
        <div>
          <p class="title">只需4步找到最值的房子</p>
          <p class="text">—— 精准匹配房源 ——</p>
        </div>
        <div class="box">
          <p>
            <span class="num">
              03/
              <span class="num1">04</span>
            </span>
            <span class="problem">您要购置的户型</span>
          </p>
          <div class="region">
            <p
              v-for="(item, index) in houseList"
              :key="index"
              @click="Onhouse(item, index)"
              :class="[houseId == index ? 'region_text' : 'region_p']"
            >
              {{ item }}
            </p>
          </div>
          <p>
            <span class="problem">您希望购买的面积是多大呢</span>
          </p>
          <div class="block">
            <el-slider v-model="value1" range :max="1000"></el-slider>
          </div>
          <p>
            <span class="num">
              04/
              <span class="num1">04</span>
            </span>
            <span class="problem">拍卖成功后是否需要提供贷款服务</span>
          </p>
          <div class="region">
            <p
              v-for="(item, index) in needList"
              :key="index"
              @click="Onneed(item.id)"
              :class="[item.show ? 'region_text' : 'region_p']"
            >
              {{ item.text }}
            </p>
          </div>
        </div>
        <p
          class="next_btn"
          @click="
            isbox3 = false;
            isbox4 = true;
          "
        >
          下一步
        </p>
      </div>
      <div v-if="isbox4">
        <div>
          <p class="title">只需4步找到最值的房子</p>
          <p class="text">—— 精准匹配房源 ——</p>
        </div>
        <div class="box">
          <p class="contact">您的联系方式是</p>
          <p class="contact_conter">
            请确保您的手机正确且畅通，将有专业法拍经理为您提供符合您需求的房源
            我们郑重承诺将绝对保护您的隐私
          </p>
          <el-input
            placeholder="请输入内容"
            v-model="input3"
            class="input-with-select"
            style="margin-bottom:15px"
          >
            <el-button slot="append">
              <span class="obtain" v-if="show" @click="OnCode">获取验证码</span>
              <span v-else>{{ second }}s</span>
            </el-button>
          </el-input>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
          <p class="next_btn btn" @click="OnseachHouse()">下一步</p>
        </div>
      </div>
      <div v-if="isbox5">
        <div class="box">
          <div class="success">
            <img src="../../../assets/img/yycg.png" alt />
            <p class="success_text">预约成功</p>
          </div>

          <p class="next_btn btn" @click="(abalse = false), Onknow()">知道了</p>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      abalse: true,
      value: [1, 100000],
      value1: [1, 1100000],
      isLoan: "",
      ablose: false,
      isbox1: true,
      isbox2: false,
      isbox3: false,
      isbox4: false,
      isbox5: false,
      areas: "",
      areasList: [],
      input3: "",
      input: "",
      verifyCode: "",
      needList: [
        {
          text: "需要",
          id: "1",
          show: false
        },
        {
          text: "不需要",
          id: "0",
          show: false
        }
      ],
      houseType: "",
      houseList: ["1居室", "2居室", "3居室", "4居室", "5居室", "5居以上"],
      houseId: "",
      region: [],
      show: true,
      timer: null,
      regionText: "",
      second: 60
    };
  },
  mounted() {
    this.OngetListByPid();
  },
  methods: {
    OnCode() {
      this.show = false;
      this.timer = setInterval(() => {
        if (this.second > 0) {
          this.second--;
        } else {
          this.show = true;
          clearInterval(this.timer);
          this.timer = null;
        }
      }, 1000);
      this.instance
        .getVerifyCode({
          id: this.input3
        })
        .then(res => {
          this.$message({
            message: res.data.msg
          });
          if (res.data.code == 0) {
            this.verifyCode = res.data.data;
          } else {
            clearInterval(this.timer);
            this.timer = null;
            this.show = true;
            this.second = 60;
          }
        })
        .catch(function(error) {});
    },
    Onregion(val) {
      let List = this.region;
      List.forEach(item => {
        if (item.id == val.id) {
          item.show = !item.show;
        }
      });
      this.region = List;
      this.$forceUpdate();
      this.areas += val.name + ",";
    },
    Onneed(val) {
      this.isLoan = val;
      this.needList.forEach(item => {
        if (item.id == val) {
          item.show = true;
        } else {
          item.show = false;
        }
      });
    },
    Onhouse(val, idx) {
      this.houseType = val;
      this.houseId = idx;
    },
    OngetListByPid() {
      this.instance
        .getListByPid({
          id: "0"
        })
        .then(res => {
          this.region = res.data.data;
          this.region.forEach(item => {
            item.show = false;
          });
          console.log(this.region);
        })
        .catch(function(error) {});
    },
    OnseachHouse() {
      if (this.input3 != "") {
        if (this.verifyCode == this.input && this.input != "") {
          this.instance
            .seachHouse({
              budgetLower: this.value[0],
              budgetUpper: this.value[1],
              areas: this.areas,
              houseType: this.houseType,
              builtUpAreaLower: this.value1[0],
              builtUpAreaUpper: this.value1[1],
              isLoan: this.isLoan,
              telephone: this.input3,
              verifyCode: this.input
            })
            .then(res => {
              if (res.data.code == 0) {
                this.isbox4 = false;
                this.isbox5 = true;
              }
            })
            .catch(function(error) {});
        } else {
          this.$message({
            message: "请正确输入验证码"
          });
        }
      } else {
        this.$message({
          message: "请填写手机号"
        });
      }
    },
    handleClose() {
      if (this.abalse == true) {
        this.$emit("Onhelp");
      }
    },
    Onknow() {
      this.$emit("Onhelp");
    }
  }
};
</script>
<style lang="less" scoped>
.next_btn {
  width: 132px;
  height: 44px;
  background: #f58058;
  border-radius: 4px;
  line-height: 44px;
  margin: 0 auto;
  text-align: center;
  font-size: 16px;
  color: #ffffff;
}
.help_dialog {
  .el-dialog {
    width: 830px;
  }
  .title {
    font-size: 36px;
    color: #3e3e3e;
    text-align: center;
  }
  .text {
    color: #f58058;
    font-size: 16px;
    text-align: center;
  }
  .box {
    margin-top: 50px;
    cursor: pointer;
    .num {
      width: 74px;
      height: 30px;
      background: #f58058;
      border-radius: 6px;
      font-size: 22px;
      color: #fff;
      padding: 5px 10px;
    }
    .num1 {
      font-size: 14px;
    }
    .problem {
      font-size: 18px;
      color: #000;
      margin-left: 14px;
    }
    .company {
      font-size: 14px;
      color: #f58058;
      text-align: right;
      span {
        color: #222;
        font-size: 14px;
      }
    }
    .block {
      margin: 40px;
    }

    .btn {
      margin-top: 20px;
    }
    .region {
      overflow: hidden;
      margin-top: 28px;
      p {
        width: 22%;
        height: 30px;

        border-radius: 4px;
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
        text-align: center;
        line-height: 30px;
      }
      .region_p {
        background: #eeeeee;
      }
      .region_text {
        background: #f58057;
        color: #fff;
      }
    }
    .contact {
      color: #565656;
      font-size: 24px;
      text-align: center;
      margin-bottom: 10px;
    }
    .contact_conter {
      font-size: 12px;
      color: #666;
      text-align: center;
      margin-bottom: 10px;
    }
    .success {
      text-align: center;
      .success_text {
        font-size: 18px;
        color: #343434;
        margin: 10px 0;
      }
    }
  }
}
</style>
<style>
.help_dialog > .el-dialog {
  background: url("~@/assets/img/bg.png") no-repeat;
}
.el-slider > .el-slider__runway > .el-slider__bar {
  background-color: #f58058;
}
.el-slider
  > .el-slider__runway
  > .el-slider__button-wrapper
  > .el-slider__button {
  border: 2px solid #f58058;
}
.box > .el-input-group > .el-input-group__append {
  border: 1px solid #f58058;
}
.box > .el-input-group > .el-input__inner {
  border: 1px solid #f58058;
}
.box .el-input > .el-input__inner {
  border: 1px solid #f58058;
}
</style>
